<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"  xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head th:replace="_header_include::frag(~{::title},~{::style},~{})">
    <title>后台管理系统</title>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="css/element-ui.css">
    <link rel="stylesheet" href="css/base.css">
    <style>
    .el-date-picker__time-header{display: none;}
    </style>
</head>
<body>
<div id="optimizeClueManagement" class="optimizeClueManagement mainPadding" style="display: none;">
    <el-breadcrumb separator="/" class="elBreadcrumb marginB20">
        <el-breadcrumb-item>Home</el-breadcrumb-item>
        <el-breadcrumb-item>充值管理</el-breadcrumb-item>
        <el-breadcrumb-item>商家充值记录</el-breadcrumb-item>
    </el-breadcrumb>
    <el-row class="marginB20">        
        <el-button type="primary" @click="gotoAdd">录入线下充值</el-button>
    </el-row>
    <div class="mainSearchBg">        
        <div class="mainSearchFormBox">
            <el-form :inline="true" class="demo-form-inline mainSearchForm" :model="form" ref="form">  
                <el-form-item label="充值商家:" label-width="auto">
                    <el-select v-model="form.rechargeBusiness" filterable  clearable placeholder="商家账户名">
                        <el-option
                            v-for="item in merchantUserListOptions"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="项目信息:">
                    <el-select clearable v-model="form.projectId" placeholder="请选择" filterable>
                        <el-option v-for="item in projectList" :key="item.id" :label="item.projectName" :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="充值日期:">
                    <el-date-picker
                        format="yyyy-MM-dd"  
                        value-format="yyyy-MM-dd"
                        v-model="form.rechargeBeginTime"
                        type="datetime"
                        placeholder="选择日期时间">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="—" class="widthauto">
                    <el-date-picker
                        format="yyyy-MM-dd"  
                        value-format="yyyy-MM-dd"
                        v-model="form.rechargeEndTime"
                        type="datetime"
                        placeholder="选择日期时间">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="流水号:">
                    <el-input v-model="form.serialNumber" placeholder=""></el-input>
                </el-form-item>
                <el-form-item label="">
                    <el-button icon="el-icon-search" type="primary" @click="searchTable('form')"  class="searchBtn" style="margin-left: 10px;">搜索</el-button>
                </el-form-item>
            </el-form>
        </div>
        <el-row class="greyTip">
            <span style="margin-right: 10px;">今日累积充值：{{this.numFormat(rechargeDTO.daySumMoney)}}元</span><span>本月累积充值：{{this.numFormat(rechargeDTO.monthSumMoney)}}元</span>
        </el-row>
        <el-row>            
            <el-table
                ref="multipleTable"
                tooltip-effect="dark"
                style="width: 100%"
                border
                :data="dataTable"
                @selection-change="handleSelectionChange"
            >
                <!-- <el-table-column align="center" type="selection" width="55"></el-table-column> -->
                <el-table-column align="center" type="index" label="序号"  width="55"></el-table-column>                
                <el-table-column align="center" prop="serialNumber" label="流水号"></el-table-column>
                <el-table-column align="center" prop="rechargeTime" label="充值日期"  :formatter="dateFormat" width="130"></el-table-column>
                <el-table-column align="center" prop="rechargeMoney" label="充值金额"></el-table-column>
                <el-table-column align="center" prop="givenAmount" label="赠送餐盟币"></el-table-column>
                <el-table-column align="center" prop="rechargeBusinessName" label="充值商家">
                    <template slot-scope="scope">
                        <span style="vertical-align: middle;">{{scope.row.rechargeBusinessName}}</span>
                        <el-button v-if="scope.row.rechargeType == 2" type="text" @click="openImg(scope.row.imgUrl)">图片</el-button>
                    </template>
                </el-table-column> 

                <el-table-column align="center" prop="projectName" label="项目信息" width="180">
                    <template slot-scope="scope">
                        <div v-if="scope.row.projectName">
                            <el-popover
                                placement="top-start"
                                trigger="hover"
                                width="200"
                            >
                                {{scope.row.projectName}}
                                <div slot="reference" class="name-wrapper">
                                    {{scope.row.projectName}}
                                </div>
                            </el-popover>
                        </div>
                        <div v-else>__</div>
                    </template>
                </el-table-column>

                <el-table-column align="center" prop="rechargeWay" label="充值方式">
                    <template slot-scope="scope">                        
                        <span v-if="scope.row.rechargeWay == 1">支付宝</span>
                        <span v-if="scope.row.rechargeWay == 2">微信</span>
                    </template>
                </el-table-column>
                <el-table-column align="center" prop="rechargeType" label="充值类型">
                    <template slot-scope="scope">                        
                        <span v-if="scope.row.rechargeType == 1">线上</span>
                        <span v-if="scope.row.rechargeType == 2">线下</span>
                    </template>
                </el-table-column>               
            </el-table>
            <table-pagination :pager="pager" @change="searchTable"></table-pagination>
        </el-row>
    </div>
    <!-- 分配资源 -->
    <el-dialog title="图片" :visible.sync="ImgFormVisible" width="540px">
        <div style="text-align: center;"><img :src="imgUrl" alt=""></div>
    </el-dialog>
    <el-dialog :before-close="handleClose" title="录入线下充值" :visible.sync="offlineRechargeVisible" width="600px">
        <div v-loading="offlineRechargeLoading">
            <iframe style="width: 100%;height: 300px;" :src="iframeUrl" frameborder="0"></iframe>        
        </div>
    </el-dialog>
</div>
</body>
<!-- import Vue before Element -->
<div th:include="_footer_include :: #jsLib"></div>

<!-- import common js-->
<script th:inline="javascript">
    var merchantUserList=[[${merchantUserList}]];//商户集合
    var rechargeAccountDTO=[[${rechargeAccountDTO}]];
    var projectList = [[${ projectList }]];//项目信息

    var ocmVM = new Vue({
        el: '#optimizeClueManagement',
        data: function() {
            return {
                rechargeDTO:rechargeAccountDTO,
                ImgFormVisible:false,
                offlineRechargeVisible:false,
                offlineRechargeLoading:false,
                iframeUrl:'',
                imgUrl:'',
                pendingReviewNum:'',
                multipleSelection: [],//选择行
                pager:{
                    total: 0,
                    currentPage: 1,
                    pageSize: 20,
                },
                form: {
                    rechargeBusiness:'',
                    rechargeBeginTime:'',
                    rechargeEndTime:'',
                    serialNumber:'',
                    projectId: ''
                },
                formLabelWidth: '120px',
                dataTable: [],
                merchantUserListOptions:merchantUserList,
                projectList: projectList
            }             
        },
        methods: {
            handleClose(){
                this.iframeUrl=""
                this.offlineRechargeVisible=false
            },
            chindRenClick(){
                this.handleClose()
                this.searchTable();
            },
            numFormat(num) {
                var c = (num.toString().indexOf ('.') !== -1) ? num.toLocaleString() : num.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,');
                return c;
            },
            clickRow(row){
                this.$refs.multipleTable.toggleRowSelection(row)
            },
            handleSelectionChange(val) {//选择节点的事件
                // console.log(val)
                this.multipleSelection = val;
            },
            handleStart(index, row) {
                console.log(index, row);
            },
            handleForbid(index, row) {
                console.log(index, row);
            },
            searchTable() {
                var startTime=this.form.rechargeBeginTime;
                var endTime=this.form.rechargeEndTime;
                if(endTime && startTime>endTime){
                    this.$message({
                        message: '结束时间不允许选择早于开始时间',
                        type: 'warning'
                    });
                    return;
                }
                var param ={};
                param.pageSize = this.pager.pageSize;
                param.pageNum = this.pager.currentPage; 
                param.rechargeBusiness = this.form.rechargeBusiness;
                param.rechargeBeginTime = this.form.rechargeBeginTime; 
                param.rechargeEndTime = this.form.rechargeEndTime;
                param.serialNumber = this.form.serialNumber; 
                param.projectId = this.form.projectId;


                axios.post('/merchant/merchantRechargeRecordManage/queryManagePageList', param)
                .then(function (response) {
                    console.log(response)
                    var result =  response.data;
                    if(result.code==0){
                        var table=result.data;
                        ocmVM.dataTable= table.data;
                        ocmVM.pager.total =  table.total;
                        ocmVM.pager.currentPage = table.currentPage;
                    }else{
                        ocmVM.$message.error(result.msg);
                    }                    
                })
                .catch(function (error) {
                     console.log(error);
                });
                
            },
          //日期数据格式化方法
            dateFormat( row, column, cellValue, index) {
              if (cellValue == undefined) {
                 return "";
              }
              return moment(cellValue).format("YYYY-MM-DD HH:mm:ss");
            },
            gotoAdd(){
                this.iframeUrl='/merchant/merchantRechargeRecordManage/initOfflinePayment'
                this.offlineRechargeVisible=true
                this.offlineRechargeLoading=true
                setTimeout(()=>{
                    ocmVM.offlineRechargeLoading=false
                },1000)
                // window.location.href="/merchant/merchantRechargeRecordManage/initOfflinePayment"
            },
            openImg(url) {
                this.ImgFormVisible = true;
                this.imgUrl=url;
            },
        },
        created(){
            var localVal=localStorage.getItem('allChangePageSize')?parseInt(localStorage.getItem('allChangePageSize')):'';
            if(localVal){this.pager.pageSize = localVal;}
            // console.info("create method");
            this.searchTable();
        },
        mounted(){
            document.getElementById('optimizeClueManagement').style.display = 'block';
        }
  })
</script>
</html>